<template>
  <basic-container>
    <el-dialog :visible="dialogVisible" append-to-body :title="title" :close-on-click-modal="false"
               :before-close="handleClose">
      <avue-form ref="uploadForm"
                 :option="formOption"
                 v-model="formModel"
                 @submit="submitImportFile"
                 :upload-after="uploadAfter"></avue-form>
    </el-dialog>
  </basic-container>
</template>

<script>

import {baseUrl} from "@/config/env";
import avueDataAdapter from "@/utils/avueDataAdapter";

export default {
  name: "ImportExcel",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "数据导入"
    },
    uploadName: {
      type: String,
      required: true,
    },
    uploadKey: {
      type: String,
      required: true,
    },
    option: {
      type: Object,
      default: null,
    },
    submitApi: {
      type: Function,
    },
  },
  watch: {
    value(val) {
      this.dialogVisible = val;
      if (!val) {
        this.handleClose();
      } else {
        this.show();
      }
    }
  },
  computed: {
    formOption() {
      return {
        column: [
          {
            prop: "filePath",
            label: "文件",
            type: "upload",
            action: `${baseUrl}/staticResources/upload`,
            drag: true,
            limit: 1,
            propsHttp: {
              name: 'fileName',
              res: 'data',
              url: 'fileLocalPath',
            },
          }
        ]
      }
    },
    importExcelApi(){
      if (this.submitApi) return this.submitApi;
      if (!this.option) return null;
      const option=this.option;
      if (!option.name || option.name.length < 1) return null;
      let apis = require(`@/api/${option.name + (option.apiSuffix || "Api")}`);
      let api=apis[option.importExcel || 'importExcel'];
      return api;
    }

  },
  data() {
    return {
      dialogVisible: this.value,
      formModel: {},
    }
  },
  methods: {
    show() {
      this.formModel = {};
      this.dialogVisible = true;
      this.changeValue(this.dialogVisible)
      this.$refs.uploadForm.resetForm();
    },
    handleClose() {
      this.formModel = {};
      this.$refs.uploadForm.resetForm();
      this.dialogVisible = false;
      this.changeValue(this.dialogVisible)
    },
    changeValue(val) {
      this.dialogVisible = val;
      this.$emit("change", this.dialogVisible)
      this.$emit("input", this.dialogVisible)
    },
    submitImportFile(val, done) {
      console.log("开始导入数据")
      let importExcelApi = this.importExcelApi;
      if (!importExcelApi) {
        done()
        this.$message.error('未配置上传接口，请联系管理员！')
        return;
      }
      let data = JSON.parse(JSON.stringify(val))
      avueDataAdapter.transformDataSave(this.formOption.column, data)
      importExcelApi(data).then(res => {
        this.$message.success('数据导入中！')
        this.$emit("importSuccess")
        this.changeValue(false);
      }).finally(() => done())
    },
    uploadAfter(res, done, loading, column) {
      done()
      this.$refs.uploadForm.submit();
    },

  }

}
</script>

<style scoped>

</style>